// 首页
<template>
  <div class="my-home">
    <!-- 二级路由的出口 -->
    <div class="my-home-main">
      <router-view></router-view>
    </div>
    <!-- 底部的tabbar开始 -->
    <div class="my-home-tabbar">
      <van-tabbar v-model="active" active-color="#f63434" inactive-color="#000">
        <van-tabbar-item to="/home/index">
          <span>首页</span>
          <template #icon="props">
            <svg
              t="1652099476210"
              class="icon"
              viewBox="0 0 1024 1024"
              version="1.1"
              xmlns="http://www.w3.org/2000/svg"
              p-id="4131"
              width="16"
              height="16"
            >
              <path
                d="M155.584 342.56l312.874667-224.565333a74.666667 74.666667 0 0 1 87.082666 0l312.874667 224.565333A117.333333 117.333333 0 0 1 917.333333 437.866667V800c0 64.8-52.533333 117.333333-117.333333 117.333333H224c-64.8 0-117.333333-52.533333-117.333333-117.333333V437.877333a117.333333 117.333333 0 0 1 48.917333-95.317333z m37.322667 51.989333A53.333333 53.333333 0 0 0 170.666667 437.877333V800a53.333333 53.333333 0 0 0 53.333333 53.333333h576a53.333333 53.333333 0 0 0 53.333333-53.333333V437.877333a53.333333 53.333333 0 0 0-22.24-43.328L518.218667 169.984a10.666667 10.666667 0 0 0-12.437334 0L192.906667 394.56z"
                :fill="props.active ? icon.active : icon.inactive"
                p-id="4132"
              ></path>
            </svg>
          </template>
        </van-tabbar-item>
        <van-tabbar-item to="/home/sort">
          <span>分类</span>
          <template #icon="props">
            <svg
              t="1652099242343"
              class="icon"
              viewBox="0 0 1024 1024"
              version="1.1"
              xmlns="http://www.w3.org/2000/svg"
              p-id="2868"
              width="16"
              height="16"
            >
              <path
                d="M575.68 736a160.32 160.32 0 1 0 160.32-160.32H599.893333c-13.461333 0-24.192 10.752-24.192 24.192V736zM736 533.333333A202.666667 202.666667 0 1 1 533.333333 736V599.893333A66.432 66.432 0 0 1 599.872 533.333333H736zM490.666667 736a202.666667 202.666667 0 1 1-202.666667-202.666667h136.128A66.432 66.432 0 0 1 490.666667 599.872V736z m-202.666667-160.32a160.32 160.32 0 1 0 160.32 160.32V599.893333c0-13.44-10.730667-24.192-24.192-24.192H288zM533.333333 287.978667A202.666667 202.666667 0 1 1 736 490.666667H599.893333A66.432 66.432 0 0 1 533.333333 424.128V288z m202.666667 160.341333a160.32 160.32 0 1 0-160.32-160.32v136.128c0 13.44 10.730667 24.192 24.192 24.192H736zM448.32 288a160.32 160.32 0 1 0-160.32 160.32h136.128c13.461333 0 24.192-10.752 24.192-24.192V288zM288 490.666667A202.666667 202.666667 0 1 1 490.666667 288v136.128A66.432 66.432 0 0 1 424.128 490.666667H288z"
                p-id="2869"
                :fill="props.active ? icon.active : icon.inactive"
              ></path>
            </svg>
          </template>
        </van-tabbar-item>
        <van-tabbar-item to="/login">
          <span>购物车</span>
          <template #icon="props" >
            <svg
              t="1652099835471"
              class="icon"
              viewBox="0 0 1024 1024"
              version="1.1"
              xmlns="http://www.w3.org/2000/svg"
              p-id="5285"
              width="16"
              height="16"
            >
              <path
                d="M848 712H318.4c-25.6 0-46.4-19.2-48-41.6L240 201.6c-1.6-25.6-16-46.4-38.4-57.6l-48-20.8c-12.8-4.8-25.6 0-32 12.8s0 25.6 12.8 32l46.4 20.8c6.4 3.2 11.2 9.6 11.2 17.6l28.8 468.8c3.2 48 46.4 86.4 96 86.4H848c12.8 0 24-11.2 24-24s-11.2-25.6-24-25.6z"
                p-id="5286"
                :fill="props.active ? icon.active : icon.inactive"
              ></path>
              <path
                d="M884.8 265.6c-14.4-16-35.2-25.6-57.6-25.6H337.6c-12.8 0-24 11.2-24 24s11.2 24 24 24h489.6c8 0 16 3.2 20.8 9.6 4.8 6.4 8 14.4 8 22.4l-38.4 211.2v1.6c-1.6 14.4-12.8 24-27.2 25.6l-420.8 32c-12.8 1.6-22.4 12.8-22.4 25.6 1.6 12.8 11.2 22.4 24 22.4h1.6l419.2-32c36.8-3.2 67.2-30.4 70.4-67.2l38.4-212.8v-1.6c4.8-20.8-1.6-43.2-16-59.2z"
                p-id="5287"
                :fill="props.active ? icon.active : icon.inactive"
              ></path>
              <path
                d="M305.6 856m-56 0a56 56 0 1 0 112 0 56 56 0 1 0-112 0Z"
                p-id="5288"
                :fill="props.active ? icon.active : icon.inactive"
              ></path>
              <path
                d="M753.6 856m-56 0a56 56 0 1 0 112 0 56 56 0 1 0-112 0Z"
                p-id="5289"
                :fill="props.active ? icon.active : icon.inactive"
              ></path>
            </svg>
          </template>
        </van-tabbar-item>
        <van-tabbar-item to="/home/mine">
          <span>我的</span>
          <template #icon="props" >
            <svg
              t="1652100425636"
              class="icon"
              viewBox="0 0 1024 1024"
              version="1.1"
              xmlns="http://www.w3.org/2000/svg"
              p-id="8241"
              width="16"
              height="16"
            >
              <path
                d="M511.913993 941.605241c-255.612968 0-385.311608-57.452713-385.311608-170.810012 0-80.846632 133.654964-133.998992 266.621871-151.88846L393.224257 602.049387c-79.986561-55.904586-118.86175-153.436587-118.86175-297.240383 0-139.33143 87.211154-222.586259 233.423148-222.586259l7.912649 0c146.211994 0 233.423148 83.254829 233.423148 222.586259 0 54.184445 0 214.67361-117.829666 297.412397l-0.344028 16.685369c132.966907 18.061482 266.105829 71.041828 266.105829 151.716445C897.225601 884.152528 767.526961 941.605241 511.913993 941.605241zM507.957668 141.567613c-79.470519 0-174.250294 28.382328-174.250294 163.241391 0 129.698639 34.230808 213.469511 104.584579 255.784982 8.944734 5.332437 14.277171 14.965228 14.277171 25.286074l0 59.344868c0 15.309256-11.524945 28.0383-26.662187 29.414413-144.319839 14.449185-239.959684 67.429531-239.959684 95.983874 0 92.199563 177.346548 111.637158 325.966739 111.637158 148.792206 0 325.966739-19.26558 325.966739-111.637158 0-28.726356-95.639845-81.534688-239.959684-95.983874-15.48127-1.548127-27.006215-14.621199-26.662187-30.102469l1.376113-59.344868c0.172014-10.148833 5.676466-19.437594 14.277171-24.770032 70.525785-42.487485 103.208466-123.678145 103.208466-255.784982 0-135.031077-94.779775-163.241391-174.250294-163.241391L507.957668 141.567613 507.957668 141.567613z"
                p-id="8242"
                :fill="props.active ? icon.active : icon.inactive"
              ></path>
            </svg>
          </template>
        </van-tabbar-item>
      </van-tabbar>
    </div>
    <!-- 底部的tabbar结束 -->
  </div>
</template>

<script>
import Vue from "vue";
import { Tabbar, TabbarItem } from "vant";

Vue.use(Tabbar);
Vue.use(TabbarItem);
export default {
  data() {
    return {
      active: 0,
      icon: {
        active: "#f63434",
        inactive: "#535353",
      },
    };
  },
};
</script>

<style lang="scss" scoped>
.my-home {
  position: absolute;
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;

  .my-home-main {
    flex: 1;
  }

  .my-home-tabbar {
    height: 0.5rem;
  }
}
</style>
